import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'
import {myAjax, ROOTURL,myAjaxJson, getAuthShop} from './../publicAPI/publicAPI'
import NavLink from './NavLink'
import TextInput from './TextInput'
import SelectInput from './SelectInput'
import CheckboxInput from './CheckboxInput'
import Table from './Table'

import style from './ServiceM.css'
class ServiceM extends Component {

	constructor (props, context) {
	    super(props, context)

	    console.log("constructor")


	    this.state = {
	                  shop_show: "none",
	                  barber_show: "none",
	                  InputValue: "",
	                  barberValue: "",
	                  barberid:"",
	                  baber: [],
	                  orderId:'',
	                  checkInput: "",
	                  cbarber:"",
	                  shops: [{id: undefined, dname: ""}],
	                  barbers: [{id: null, meta: {name: ""}}],
	                 } // 初始化状态
	    this.shop = {};//当前选择门店
	    var URL = ROOTURL +'shop/search.api';

      	var _this = this ;
        // fetch(URL, {
        //     method : 'POST',
        //     mode: 'cors',
        //     body: JSON.stringify({
        //     	"where":{"dd":[["eq",false]]}
        //     })
        // }).then(res=>{
        //     if(res.ok){
        //         res.json().then(data=>{
        //             console.log('--------')
        //             console.log(data);
        //             console.log(res);
        //             console.log('--------')
        //             this.setState({
        //             	shops:data
        //             })
        //         })
        //     }
        // })

				getAuthShop(null, (data) => {
						console.log('--------')
						console.log(data);
						console.log('--------')
						this.setState({
							shops:data
						})
				})

	}

	componentWillMount() {
		console.log("componentWillMount")

	}

	componentDidMount() {
	    console.log("componentDidMount")
	}


	inputFocus() {
		this.setState({shop_show: "block"})
	}
	barberFocus(){
		this.setState({barber_show: "block"})
	}


	inputTClick(e) {
		const selectValue = e.target.value
		const selectTxt = e.target.innerHTML
		this.shop.id = selectValue
		this.getBaberOption()
		this.setState({shop_show: "none", InputValue: selectTxt,barberValue:""})
	}
	barberClick(e){
		const selectValue = e.target.value
		const selectTxt = e.target.innerHTML
		this.shop.id = selectValue

		this.setState({barber_show: "none", barberValue: selectTxt,barberid:selectValue})
	}

	getBaberOption() {

		const newUrl= ROOTURL + 'servant/profile/search.api';
		const shop = this.shop;
		const _data = {
			where: {
	            shopId: [
	                ["eq", shop.id]
	            ],
	            "dd":[
	            	["eq",false]
	            ]
			}
		}
		myAjaxJson(newUrl, 'POST', _data, (data) => {
			console.log(data)
            if (data.length <= 0) {
                alert("门店没有分配理发师")
            }

			this.setState({barbers: data});
		}, (data) => {
			alert("获取理发师失败")
		})

	}


    //保存时检查是否填写完
    handleSave() {

        if (this.state.InputValue=="") {
       	    this.setState(
       	         {checkInput:"请选择门店"}
       	    )
        }else{
        	if (this.state.orderId == "") {
                this.setState(
                    {checkInput: "请输入服务码"}
                 )
        	}else{
        		this.setState(
       				{checkInput: ""}
        		)
        		var URL = ROOTURL +'contract/hi-set-served.api?id='+this.state.orderId+'&servant='+this.state.barberid;

		      	var _this = this ;
		        fetch(URL, {
		            method : 'POST',
		            mode: 'cors',

		        }).then(res=>{
		            if(res.ok){
		                res.json().then(data=>{
		                   alert("补录成功")
		                })
		            }else{
		            	alert("补录失败")
		            }
		        })
        	}
        }


    }

    render() {
	    return (

	    	<div className="right-wapper" style={{height: this.state.rHeight}}>
	    		<div className="rt-wrap rt-wrap-header">
	    			<div className="input-div pr">
		    			<label>门店：</label>
		    			<input type="text" placeholder="请选择门店" className="default-text"
		    				value={this.state.InputValue}
		    				onFocus={() => this.inputFocus()}/>
		    			<ul className="input_select" style={{display: this.state.shop_show}}>
		    				{this.state.shops.map((item, index) => <li onClick={(e) => this.inputTClick(e)} key={index} value={item.id}>{item.dname}</li>)}
		    			</ul>
		    		</div>
		    		<div className="input-div pr">
		    			<label>理发师：</label>
		    			<input type="text" placeholder="请选择理发师" className="default-text"
		    				value={this.state.barberValue}
		    				onFocus={() => this.barberFocus()}/>
		    			<ul className="input_select" style={{display: this.state.barber_show}}>
		    				{this.state.barbers.map((item, index) => <li onClick={(e) => this.barberClick(e)} key={index} value={item.id}>{item.meta.name}</li>)}
		    			</ul>
		    		</div>
		    		<div className="input-div">
		    			<label>订单id：</label>
		    			<TextInput inputId="name" placeHolder="请输入要补录的订单" val={this.state.orderId} onChange={val=>this.setState({orderId: val})}/>
		    		</div>
		    		<button className={style["search-btn-ot"]} onClick={this.handleSave.bind(this)}>补录</button>
		    		{ this.state.checkInput != "" ?
                        <span id={style["hint"]}>{this.state.checkInput}</span> : null
                    }
	    		</div>
	    	</div>
	    )
	  }
}

 export default ServiceM
